<template>
    <div class="product-list">
      <!-- 筛选控件 -->
      <div class="filter-section">
        <el-select v-model="selectedCategory" placeholder="选择类别" class="select">
          <el-option
            v-for="category in categories"
            :key="category.value"
            :label="category.label"
            :value="category.value">
          </el-option>
        </el-select>
      </div>
      <!-- 产品列表 -->
      <div class="products">
        <el-row :gutter="20">
          <el-col :span="6" v-for="product in filteredProducts" :key="product.id">
            <router-link :to="{ name: 'ProductDetail', params: { id: product.id } }">
              <el-card class="product-card">
                <img :src="product.imageUrl[0]" class="product-image" alt="Product image" />
                <div>
                  <h3 class="product-name">{{ product.name }}</h3>
                  <p class="product-description">{{ product.description }}</p>
                  <div class="product-price">${{ product.price }}</div>
                </div>
              </el-card>
            </router-link>
          </el-col>
        </el-row>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted} from 'vue';
  import axios from 'axios';

  const products = ref([]);
  const selectedCategory = ref('');
  const categories = ref([
    { value: 'category1', label: '智能手机' },
    { value: 'category2', label: '笔记本电脑' },
  ]);
  
  // 计算筛选后的商品列表
const filteredProducts = computed(() => {
  return selectedCategory.value
    ? products.value.filter(p => p.category === selectedCategory.value)
    : products.value;
});

// 从后端获取商品数据
const fetchProducts = async () => {
  try {
    const response = await axios.get('http://localhost:8080/api/product/getAllProducts');
    products.value = response.data.map(product => ({
      ...product,
      // 将 imageUrl 字符串分割成数组
      imageUrl: product.imageUrl
        ? product.imageUrl.split('，').map(img => `/src${img.substring(2)}`) // 使用逗号分隔符并处理图片路径
        : [] // 如果没有 imageUrl，则返回空数组
    }));
  } catch (error) {
    console.error("获取商品数据失败:", error);
  }
};


// 在组件挂载时获取数据
onMounted(async () => {
  await fetchProducts();
  console.log(products.value); // 检查返回的数据结构是否包含正确的 `imageUrl`
});

</script>
<style scoped>
.select{
    float: right;
    margin-top: 8px;
}
.product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 250px;
  height: 350px;
  box-sizing: border-box;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin: 5px 0px; /* 设置左右间距为 15px */
}



.product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

.product-image {
  width: 140px;
  height: 140px;
  object-fit: cover;
  margin-bottom: 10px;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 5px 0;
}

.product-description {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin: 5px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 2.8em; /* 确保两行高度 */
}

.product-price {
  font-size: 18px;
  color: #f56c6c;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>
  